<template>
  <div class="searchbar">
    <input v-model="text" @keyup.enter="submitLike" placeholder="find goods"/>
    <button @click="submitLike">搜索</button>
  </div>
</template>

<script lang="ts" setup>
 import {GoodsService} from '@/service'
 import { ref } from '@vue/reactivity'
 const emit = defineEmits(['submit-like'])
 const text = ref('')
 
 function submitLike() {
   emit('submit-like', text.value.trim())
   text.value = ''
 }
</script>

<style lang="scss" scoped>
 div.searchbar {
   background: #fff;
   width: 546px;
   height: 32px;
   display: flex;


   input {
     background: transparent none repeat scroll 0% 0%;
     border: 2px solid #e2231a;
     padding: 2px 44px 2px 17px;
     width: 425px;
     height: 26px;
     line-height: 26px;
     font-size: 12px;
     outline: 0;
   }

   button {
     border-radius: 0;
     width: 58px;
     height: 33px;
     line-height: 33px;
     border: none;
     background: #e1251b;
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     transition: background .2s ease;
     cursor: pointer;
   }
 }
</style>